<%--
  Created by IntelliJ IDEA.
  User: Shinelon
  Date: 2019/8/18
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单列表</title>
    <link href="layui/css/layui.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        /*自定义页面效果*/
        /*通过页面元素查看类名*/
        .layui-table-cell{
            height:auto;
            line-height:28px;
        }
    </style>
    <script src="layui/layui.js" type="text/javascript"></script>
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>

    <script type="text/javascript">
        layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#myTable',//一般都是些id选择器
                url:"order/selectMastersByPage",//数据接口：请求地址
                page: true,//开启分页

                //where:{"categoryId":101},//发送额外参数
                //toolbar:"#myToolbar",
                title:"订单列表",//导出文件时的名字

                //列
                cols: [[ //表头
                    {field: 'id', title: '编号',align:"center",width:"10%"},
                    {field: 'buyerName', title: '姓名',align:"center",width:"5%"},
                    {field: 'iphone', title: '电话',align:"center",width:"5%"},
                    {field: 'address', title: '地址',align:"center",width:"5%"},
                    {field: 'openid', title: '微信',align:"center",width:"5%"},
                    {field: 'amount', title: '总金额',align:"center",width:"5%"},
                    {templet:"#orderStatus", title: '订单状态',align:"center",width:"8%"},
                    {templet:"#payStatus", title: '支付状态',align:"center",width:"8%"},
                    {field: 'createTime', title: '创建时间',align:"center",width:"13%"},
                    {field: 'updateTime', title: '修改时间',align:"center",width:"13%"},
                    {templet:"#caoZuo",title:'操作',align:"center",width:"23%"}
                ]]
            });

        });

        function reloadTable() {
            layui.use('table', function() {
                var table = layui.table;
                table.reload('myTable');
            });
        }

        //查看订单详情
        function toCheckDetail(id){
            layui.use(['layer','form'], function(){
                var layer = layui.layer;
                $.ajax({
                    url:"order/selectDetailsByMasterId",
                    data:{"orderId":id},
                    type:"post",
                    success:function (data) {

                        var details = "";

                        $.each(data,function(index,detail){
                            details += "<div class='layui-form-item'>\n" +
                                "            <label class='layui-form-label'>商品名字</label>\n" +
                                "            <div class='layui-input-block'>\n" +
                                "                <input value='"+detail.product.name+"' class='layui-input' readonly/>\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "        <div class='layui-form-item'>\n" +
                                "            <label class='layui-form-label'>单价</label>\n" +
                                "            <div class='layui-input-block'>\n" +
                                "                <input value='"+detail.product.price+"' class='layui-input' readonly/>\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "        <div class='layui-form-item'>\n" +
                                "            <label class='layui-form-label'>购买数量</label>\n" +
                                "            <div class='layui-input-block'>\n" +
                                "                <input value='"+detail.quantity+"' class='layui-input' readonly/>\n" +
                                "            </div>\n" +
                                "        </div>";
                        });

                        details += "<div class='layui-form-item'>\n" +
                            "            <div class='layui-input-block'>\n" +
                            "                <button class='layui-btn' onclick='layer.closeAll('page')'>确定</button>\n" +
                            "            </div>\n" +
                            "        </div>";

                        $("#orderDetails").html(details);

                        //打开弹出层
                        layer.open({
                            title:"订单详情",
                            content:$("#orderDetails"),
                            type:1,
                            maxmin:true
                        });
                    }
                })

            });
        }

        //确认支付
        function toConfirmPay(id) {
            layui.use(['layer','table'],function () {
                var layer = layui.layer;
                var table = layui.table;

                //弹出confirm确认框
                //function为点击确认后执行的函数
                layer.confirm("确认要支付该订单吗？",{icon:3,title:"支付提示"},function () {
                    //console.log(id);

                    //发送请求
                    $.ajax({
                        url:"order/updateStatus",
                        data:{"id":id},
                        type:"post",
                        success:function (data) {
                            //1.提示成功
                            if(data.isUpdate){
                                layer.alert("支付成功！",{icon:1,time:2000});
                            } else {
                                layer.alert("支付失败！",{icon:2,time:2000});
                            }

                            //刷新表格
                            table.reload('myTable');
                        }
                    })
                })
            });
        }

        //确认删除
        function toConfirmDelete(id) {
            layui.use(['layer','table'],function () {
                var layer = layui.layer;
                var table = layui.table;

                //弹出confirm确认框
                //function为点击确认后执行的函数
                layer.confirm("确认要删除掉这条订单信息吗？",{icon:3,title:"删除提示"},function () {
                    //console.log(id);

                    //发送删除请求
                    $.ajax({
                        url:"order/delete",
                        data:{"id":id},
                        type:"post",
                        success:function (data) {
                            //1.提示删除成功
                            if(data.isDelete){
                                layer.alert("删除成功！",{icon:1,time:2000});
                            } else {
                                layer.alert("删除失败！",{icon:2,time:2000});
                            }

                            //2.刷新table
                            table.reload('myTable');
                        }
                    })
                })
            });
        }

    </script>

    <%-- 订单状态 --%>
    <script type="text/html" id="orderStatus">
        {{#  if(d.orderStatus == 0){ }}
            新订单
        {{#  } else { }}
            老订单
        {{#  } }}
    </script>

    <%-- 支付状态 --%>
    <script type="text/html" id="payStatus">
        {{#  if(d.payStatus == 0){ }}
            未支付
        {{#  } else { }}
            已支付
        {{#  } }}
    </script>

    <%-- 操作栏 --%>
    <script type="text/html" id="caoZuo">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-sm" onclick="toCheckDetail('{{d.id}}')">
            <i class="layui-icon">&#xe6b2;</i> 订单详情
        </button>

        {{#  if(d.payStatus == 0){ }}
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm" onclick="toConfirmPay('{{d.id}}')">
                <i class="layui-icon">&#xe65e;</i> 支付
            </button>
        {{#  } else { }}
            <button type="button" class="layui-btn layui-btn-radius layui-btn-disabled layui-btn-sm">
                <i class="layui-icon">&#xe65e;</i> 已支付
            </button>
        {{#  } }}

        <button type="button" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" onclick="toConfirmDelete('{{d.id}}')">
            <i class="layui-icon layui-icon-delete"></i> 删除
        </button>

    </script>

</head>
<body>

    <%-- 表 --%>
    <table id="myTable"></table>

    <%-- 订单详情 --%>
    <form id="orderDetails" class="layui-form" style="display: none">
    </form>

</body>
</html>
